
<template >
  <el-dialog
    class="dialogSt"
    v-model="state.visible"
    :title="
      props.isk == 0 ? '快速会议' : props.isk == 1 ? '新增会议组' : '编辑会议组'
    "
    width="600"
    style="padding: 0; border-radius: 12px"
    @opened="opened"
  >
    <!-- <div class="diaTop">
      <div class="tit">
        {{
          props.isk == 0
            ? "快速会议"
            : props.isk == 1
            ? "新增会议组"
            : "编辑会议组"
        }}
      </div>
    </div> -->
    <div class="diaBot">
      <el-form :model="state.form" label-width="120">
        <el-form-item label="会议主题">
          <el-input
            v-model="state.form.meetingTheme"
            :disabled="props.isk == 3"
          />
        </el-form-item>
        <el-form-item label="会议组成员" v-if="props.isk != 0">
          <el-select
            v-model="state.form.meetingMemberIds"
            multiple
            placeholder="请选择参会人员"
          >
            <el-option
              :label="item.name"
              :value="item.userId"
              v-for="(item, inx) in props.pps"
              :key="inx"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="fbtn">
        <el-button type="primary" plain @click="state.visible = false"
          >取消</el-button
        >
        <el-button type="primary" @click="submit"
          >{{ props.isk == 0 ? "开始会议" : "保存" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { getchangeGroup, getaddMember, getbeginMeet } from "@/api/videoMeet.js";

const props = defineProps({
  show: Boolean,
  isk: Number, //0快速 1新增 2编辑 3会议内编辑
  pps: Array,
  meet: Object,
});
const state = reactive({
  visible: false,
  form: { meetingTheme: "", meetingMemberIds: [] },
});
watch(
  () => props.show,
  (newValue) => {
    state.visible = newValue;
  }
);

const opened = () => {
  state.form = { ...props.meet };
  console.log(" state.form", state.form);
  // state.form.meetingMemberIds = JSON.parse(state.form.meetingMemberIds)
  // state.form.meetingMemberIds = state.form.meetingMemberIds.map(s=>''+s)
};
const emit = defineEmits(["back"]);

const submit = async () => {
  if (state.form.meetingTheme == "") {
    ElMessage.error("请输入会议主题");
    return;
  }
  if (props.isk > 0) {
    if (state.form.meetingMemberIds.length == 0) {
      ElMessage.error("请选择会议组成员");
      return;
    }
  }
  if (props.isk == 0) {
    //快速会议---直接调取开始会议的接口
    let data = {
      optType: "S",
      meetingGroupId: "",
      meetingTheme: state.form.meetingTheme,
      meetingMemberIds: state.form.meetingMemberIds,
    };
    emit("back", data);
    let res = await getbeginMeet(data);
    console.log(" res.data.", res.data);
    emit("back", res.data.meetingInfo);
    state.visible = false;
  } else if (props.isk == 1) {
    //新增
    let data = {
      optType: "A",
      meetingTheme: state.form.meetingTheme,
      meetingMemberIds: state.form.meetingMemberIds,
    };
    let res = await getchangeGroup(data);
    emit("back", res.data.meetingInfo);
    state.visible = false;
  } else if (props.isk == 2) {
    //编辑
    let data = {
      optType: "U",
      meetingGroupId: state.form.meetingGroupId,
      meetingTheme: state.form.meetingTheme,
      meetingMemberIds: state.form.meetingMemberIds,
    };
    let res = await getchangeGroup(data);
    emit("back");
    state.visible = false;
  } else if (props.isk == 3) {
    //邀请
    let data = {
      meetingId: state.form.meetingId,
      userIds: state.form.meetingMemberIds,
    };
    let res = await getaddMember(data);
    state.visible = false;
  }
};
</script>

<style  lang="scss">
.dialogSt {
  font-family: PingFangSC, PingFang SC;
  .diaTop {
    padding-bottom: 12px;
    border-bottom: 1px solid #ccddf7;

    .tit {
      font-weight: 600;
      font-size: 16px;
      color: #293555;
      line-height: 22px;
      text-align: left;
    }
    .bot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bot_left {
        font-weight: 400;
        font-size: 14px;
        color: #58627b;
        line-height: 20px;
        text-align: left;
      }
      span {
        font-weight: 500;
        font-size: 14px;
        color: #293555;
        line-height: 18px;
        text-align: left;
        margin-right: 10px;
      }
    }
  }
  .diaBot {
    .itemSty {
      margin-top: 14px;
      .itemBt {
        font-weight: 600;
        font-size: 14px;
        color: #293555;
        line-height: 20px;
        text-align: left;
      }
      .wtmsSty {
        margin-top: 16px;
        background-color: #fff;
        border-radius: 12px;
        position: relative;
        padding: 10px 30px;
        .wtbzSty {
          position: absolute;
          top: -6px;
          left: 20px;
        }
        .itemTit {
          width: 60px;
          font-weight: 600;
          font-size: 14px;
          color: #293555;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .el-dialog__header {
    background: #6e8dfb !important;
    padding: 14px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__headerbtn {
    font-size: 24px;
    margin-top: 2px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .el-dialog__body {
    padding: 16px 30px !important;
    background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%) !important;
  }
  .el-dialog__footer {
    background: linear-gradient(134deg, #e9effb, #fbfcff);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 1px solid #ccddf7;
    box-shadow: 0 0 #fff;
    padding: 30px 0 20px;
  }
}
.fbtn {
  display: flex;
  justify-content: center;
  gap: 20px;
  .el-button {
    width: 130px;
    height: 40px;
  }
}
</style>